<template>
	<view class="commodity_box">
		<image
		class="img" 
		:src="img">
		</image>
		<view class="text_box">
			<view class="commodity_name">{{name}}</view>
			<view>￥ {{price}}</view>
			<view>{{ discount }}折</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['img','name','price','discount']
	}
</script>

<style>
	.commodity_box{
		width: 335rpx;
		padding-bottom: 20rpx;
		margin: 0 20rpx;
	}
	.img{
		width: 100%;
		height: 335rpx;
	}
	.text_box{
		text-align: center;
	}
	.commodity_name{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>